<template>
  <div class="organize-manage-view">
    <div class="organize-manage-left">
      <div class="organize-manage-left-top">
        <div class="left-top-info">
          <el-button type="primary" class="add-button" @click="addOrganize">新增顶级机构</el-button>
        </div>
      </div>
      <div class="organize-manage-left-bottom">
        <div class="menuContent"
             v-loading="isLoading"
             element-loading-text="数据加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(21, 29, 54, 0.8)"
        >
          <el-scrollbar :native="false" tag="section" class="el-scroll">
            <el-tree :data="orgdata" :props="defaultProps" :highlight-current="true"
                     @node-click="orgNodeClick"></el-tree>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="organize-manage-right">
      <div class="organize-manage-right-top">
        <el-button type="primary" class="edit-button" @click="addChildOrg" v-if="isChildOrg" :disabled="isabled">
          新增子机构
        </el-button>
        <el-button type="primary" class="edit-button" @click="addStation" v-else :disabled="isabled">新增岗位
        </el-button>
      </div>
      <div class="organize-manage-right-bottom">
        <el-tabs v-model="activeName" type="border-card" @tab-click="tabsClick">
          <el-tab-pane label="机构" name="first">
            <div class="organize-info-content">
              <el-form label-width="80px" :model="orgform" class="organize-info-content-form" :rules="addorgrules"
                       ref="editorgform">
                <el-form-item label="机构名称" prop="name">
                  <el-input v-model="orgform.name" placeholder="机构名称" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="机构简称" prop="subname">
                  <el-input v-model="orgform.subname" placeholder="机构简称" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="机构类别" prop="type">
                  <el-select v-model="orgform.type" placeholder="机构类别" width="100%" :disabled="isabled">
                    <el-option v-for="(item,index) in orgTypeList" :key="index" :label="item.datacode"
                               :value="item.datavalue"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="机构电话" prop="phone">
                  <el-input v-model="orgform.phone" placeholder="机构电话" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="机构网址" prop="website">
                  <el-input v-model="orgform.website" placeholder="机构网址" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="机构路径" prop="path">
                  <el-input v-model="orgform.path" placeholder="机构路径" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="原始id" prop="orclId">
                  <el-input v-model="orgform.orclId" placeholder="机构原始id" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="机构介绍" prop="brief">
                  <el-input v-model="orgform.brief" placeholder="机构介绍" :disabled="isabled"></el-input>
                </el-form-item>
                <el-form-item label="代表颜色" prop="color">
                  <el-color-picker v-model="orgform.color" :disabled="isabled"></el-color-picker>
                </el-form-item>
                <el-form-item class="form-button">
                  <template>
                    <el-button type="primary" @click="delKeep" :disabled="isabled">删除</el-button>
                    <el-button type="primary" @click="editKeep" :disabled="isabled">保存</el-button>
                  </template>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="岗位" name="second">
            <div class="organize-info-content">
              <div class="seach-station">
                <el-select v-model="stationlevel" placeholder="请选择岗位级别" width="100%" class="input-with-select"
                           @change="selectStation">
                  <el-option v-for="(item,index) in levelSearch" :key="index" :label="item.datacode"
                             :value="item.datavalue"></el-option>
                </el-select>
              </div>
              <div class="station-manage-content">
                <el-table
                  :data="stationData"
                  height="100%"
                  border
                  style="width: 100%"
                  highlight-current-row
                  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                >
                  <el-table-column
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="index"
                    label="序号"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="name"
                    label="岗位名称"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="fullname"
                    label="岗位全称"
                  >
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :show-overflow-tooltip="true"
                    prop="levelCode"
                    label="岗位级别"
                  >
                  </el-table-column>
                  <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="editStation(scope.$index, scope.row)">编辑
                      </el-button>
                      <el-button
                        size="mini"
                        type="danger"
                        @click="delStation(scope.$index, scope.row)">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="station-manage-paging">
                <el-pagination
                  layout="total, sizes, prev, pager, next"
                  background
                  :page-size="pageSize"
                  :total="total"
                  :page-count="10"
                  :page-sizes="[5, 10, 20, 40]"
                  :current-page="currentPage"
                  @current-change="changePage"
                  @size-change="sizeChange"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog title="新增顶级机构" :visible="addTopOrgdialog" width="30%" @close="addTopOrgClose">
      <el-form label-width="80px" :model="addToporgform" :rules="addorgrules" ref="addToporgform">
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="addToporgform.name" placeholder="机构名称"></el-input>
        </el-form-item>
        <el-form-item label="机构简称" prop="subname">
          <el-input v-model="addToporgform.subname" placeholder="机构简称"></el-input>
        </el-form-item>
        <el-form-item label="机构类别" prop="type">
          <el-select v-model="addToporgform.type" placeholder="机构类别" width="100%">
            <el-option v-for="(item,index) in orgTypeList" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构电话" prop="phone">
          <el-input v-model="addToporgform.phone" placeholder="机构电话"></el-input>
        </el-form-item>
        <el-form-item label="机构网址" prop="website">
          <el-input v-model="addToporgform.website" placeholder="机构网址"></el-input>
        </el-form-item>
        <el-form-item label="机构路径" prop="path">
          <el-input v-model="addToporgform.path" placeholder="机构路径"></el-input>
        </el-form-item>
        <el-form-item label="原始id" prop="orclId">
          <el-input v-model="addToporgform.orclId" placeholder="机构原始id"></el-input>
        </el-form-item>
        <el-form-item label="机构介绍" prop="brief">
          <el-input v-model="addToporgform.brief" placeholder="机构介绍"></el-input>
        </el-form-item>
        <el-form-item label="代表颜色" prop="color">
          <el-color-picker v-model="addToporgform.color"></el-color-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrtCancel">取消</el-button>
        <el-button type="warning" @click="orgKeep">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增子机构" :visible="addChildOrgdialog" width="30%" @close="addChildOrgClose">
      <el-form label-width="80px" :model="addChildorgform" :rules="addorgrules" ref="addChildorgform">
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="addChildorgform.name" placeholder="机构名称"></el-input>
        </el-form-item>
        <el-form-item label="机构简称" prop="subname">
          <el-input v-model="addChildorgform.subname" placeholder="机构简称"></el-input>
        </el-form-item>
        <el-form-item label="机构类别" prop="type">
          <el-select v-model="addChildorgform.type" placeholder="机构类别" width="100%">
            <el-option v-for="(item,index) in orgTypeList" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构电话" prop="phone">
          <el-input v-model="addChildorgform.phone" placeholder="机构电话"></el-input>
        </el-form-item>
        <el-form-item label="机构网址" prop="website">
          <el-input v-model="addChildorgform.website" placeholder="机构网址"></el-input>
        </el-form-item>
        <el-form-item label="机构路径" prop="path">
          <el-input placeholder="角色路径后缀" v-model="addChildorgform.path">
            <template slot="prepend" class="prepend">{{orgform.path}}.</template>
          </el-input>
        </el-form-item>
        <el-form-item label="原始id" prop="orclId">
          <el-input v-model="addChildorgform.orclId" placeholder="机构原始id"></el-input>
        </el-form-item>
        <el-form-item label="机构介绍" prop="brief">
          <el-input v-model="addChildorgform.brief" placeholder="机构介绍"></el-input>
        </el-form-item>
        <el-form-item label="代表颜色" prop="color">
          <el-color-picker v-model="addChildorgform.color"></el-color-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addChildOrtCancel">取消</el-button>
        <el-button type="warning" @click="orgChildKeep">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增岗位" :visible="addStationdialog" width="30%" @close="addStationClose">
      <el-form label-width="80px" :model="addStationform" :rules="addstationrules" ref="addStationform">
        <el-form-item label="岗位名称" prop="name">
          <el-input v-model="addStationform.name" placeholder="岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位全称" prop="name">
          <el-input placeholder="岗位全称" v-model="addStationform.fullname">
            <template slot="prepend" class="prepend">{{orgform.name}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="岗位级别" prop="level">
          <el-select v-model="addStationform.level" placeholder="请选择岗位级别" width="100%">
            <el-option v-for="(item,index) in stationLevelList" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addStationCancel">取消</el-button>
        <el-button type="warning" @click="addStationKeep">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑岗位" :visible="editStationdialog" width="30%" @close="editStationClose">
      <el-form label-width="80px" :model="addStationform" :rules="addstationrules" ref="editStationform">
        <el-form-item label="岗位名称" prop="name">
          <el-input v-model="addStationform.name" placeholder="岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位全称" prop="fullname">
          <el-input placeholder="岗位全称" v-model="addStationform.fullname">
            <template slot="prepend" class="prepend">{{orgform.name}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="岗位级别" prop="level">
          <el-select v-model="addStationform.level" placeholder="请选择岗位级别" width="100%">
            <el-option v-for="(item,index) in stationLevelList" :key="index" :label="item.datacode"
                       :value="item.datavalue"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editStationCancel">取消</el-button>
        <el-button type="warning" @click="editStationKeep">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "organizeManageView",
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },
      orgdata: {
        type: Array,
        default: []
      },
      defaultProps: {
        type: Object,
        default: {}
      },
      orgform: {
        type: Object,
        default: {}
      },
      addToporgform: {
        type: Object,
        default: {}
      },
      addChildorgform: {
        type: Object,
        default: {}
      },
      addTopOrgdialog: {
        type: Boolean,
        default: false
      },
      addChildOrgdialog: {
        type: Boolean,
        default: false
      },
      isabled: {
        type: Boolean,
        default: true
      },
      stationData: {
        type: Array,
        default: []
      },
      isChildOrg: {
        type: Boolean,
        default: true
      },
      addStationdialog: {
        type: Boolean,
        default: false
      },
      addStationform: {
        type: Object,
        default: {}
      },
      editStationdialog: {
        type: Boolean,
        default: false
      },
      stationLevelList: {
        type: Array,
        default: []
      },
      levelSearch: {
        type: Array,
        default: []
      },
      pageSize: {
        type: Number,
        default: 10
      },
      total: {
        type: Number,
        default: 0
      },
      currentPage: {
        type: Number,
        default: 1
      },
      orgTypeList: {
        type: Array,
        default: []
      }

      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {},
    watch: {},
    data() {
      let name = (rule, value, callback) => {
        let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]/;
        // let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]+\d$/;
        if (!value) {
          return callback(new Error('机构名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('机构名不能以特殊字符和数字开头'));
        } else {
          callback();
        }
      };

      let phone = (rule, value, callback) => {
        // let reg = /^1[3-9]\d{9}/;
        let reg = /^((0\d{2,3}-\d{7,8})|(1[3-9]\d{9}))$/;
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的手机号码'));
        } else {
          callback();
        }
      };

      let website = (rule, value, callback) => {
        let reg = /^(http|https):\/\//;
        if (!value) {
          return callback(new Error('机构网址不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的网址,必须以http或https开头'));
        } else {
          callback();
        }
      };


      let fullname = (rule, value, callback) => {
        let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]/;
        // let reg = /^[^\d.\-\[\]{}+=_;:'"<>?/\\，,。、‘’“”；：【】|——]+\d$/;
        if (!value) {
          return callback(new Error('岗位名不能为空'));
        } else if (!reg.test(value)) {
          return callback(new Error('岗位名不能以特殊字符和数字开头'));
        } else {
          callback();
        }
      };

      return {
        activeName: 'first',
        stationSeach: "",
        stationlevel: "",
        addorgrules: {
          name: [
            {required: true, validator: name, trigger: 'blur'},
          ],
          subname: [
            {required: true, validator: name, trigger: 'blur'}
          ],
          type: [
            {required: true, message: '请输入机构类别', trigger: 'change'}
          ],
          phone: [
            {required: true, validator: phone, trigger: 'change'}
          ],
          website: [
            {required: true, validator: website, trigger: 'change'}
          ],
          path: [
            {required: true, message: '请输入机构路径', trigger: 'blur'}
          ],
          orclId: [
            {required: true, message: '请输入原始id', trigger: 'blur'}
          ],
          color: [
            {required: true, message: '请输入机构颜色', trigger: 'change'}
          ],
          brief: [
            {required: true, message: '请输入介绍', trigger: 'blur'}
          ]
        },
        addstationrules: {
          name: [
            {required: true, validator: fullname, trigger: 'blur'},
          ],
          fullname: [
            {required: true, validator: fullname, trigger: 'blur'},
          ],
          level: [
            {required: true, message: '请输入层级', trigger: 'change'}
          ]
        }
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      addOrganize() {
        this.$emit('addOrganize');
      },
      changePage() {
        this.$emit('changePage');
      },
      orgNodeClick(nodeInfo) {
        this.$emit('orgNodeClick', nodeInfo);
      },
      addTopOrgClose() {
        this.$emit('addTopOrgClose');
      },
      addOrtCancel() {
        this.$emit('addOrtCancel');
      },
      orgKeep() {
        this.$emit('orgKeep');
      },
      tabsClick(e) {
        this.$emit('tabsClick', e);
      },
      addChildOrg() {
        this.$emit('addChildOrg');
      },
      orgChildKeep() {
        this.$emit('orgChildKeep');
      },
      addChildOrgClose() {
        this.$emit('addChildOrgClose');
      },
      addChildOrtCancel() {
        this.$emit('addChildOrtCancel');
      },
      editKeep() {
        this.$emit('editKeep');
      },
      delKeep() {
        this.$emit('delKeep');
      },
      editStation(index, row) {
        this.$emit('editStation', index, row);
      },
      delStation(index, row) {
        this.$emit('delStation', index, row);
      },
      addStation() {
        this.$emit('addStation');
      },
      addStationClose() {
        this.$emit('addStationClose');
      },
      addStationCancel() {
        this.$emit('addStationCancel');
      },
      addStationKeep() {
        this.$emit('addStationKeep');
      },
      editStationClose() {
        this.$emit('editStationClose');
      },
      editStationCancel() {
        this.$emit('editStationCancel');
      },
      editStationKeep() {
        this.$emit('editStationKeep');
      },
      findStation() {
        this.$emit('findStation');
      },
      selectStation(item) {
        this.$emit('selectStation', item);
      },
      changePage(page) {
        this.$emit('changePage', page);
      },
      sizeChange(num) {
        this.$emit('sizeChange', num);
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./organizeManage");
</style>
